<template>
  <div class="left">
    <ul>
      <li
        v-for="item in nav"
        :key="item.name"
        @click="handleNav(item)"
        :class="{ active: active() == item.name }"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "left",
  data() {
    return {
      nav: [
        {
          path: "/comment",
          name: "comment",
          title: "评论",
        },
        {
          path: "/variety",
          name: "variety",
          title: "菜品",
        },
        {
          path: "/admin",
          name: "admin",
          title: "管理员",
        },
        {
          path: "/banner",
          name: "banner",
          title: "轮播图",
        },
        {
          path: "/paihao",
          name: "paihao",
          title: "排号",
        },
        {
          path: "/order",
          name: "order",
          title: "订单表",
        },
      ],
      // active: "comment",
    };
  },
  methods: {
    handleNav(item) {
      localStorage.setItem("active", item.name);
      this.$nextTick(() => {
        this.$router.push({
          name: item.name,
        });
      });
      this.$forceUpdate();
      // console.log(this.active);
      // this.active = item.name;
    },
    active() {
      let _active = localStorage.getItem("active");
      if (!_active) localStorage.setItem("active", "comment");
      else return _active;
      return "comment";
    },
  },
};
</script>

<style lang="less" scoped>
.left {
  padding-top: 15px;
}
ul {
  list-style: none;
  li {
    cursor: pointer;
    height: 60px;
    width: auto;
    line-height: 60px;
    padding-left: 20px;
  }
}
.active {
  background-color: #e6f4ff;
  color: #0052e0;
  border-right: 3px solid #0052e0;
}
</style>
